import { useState ,useEffect} from 'react';
import http from '../../utils/http';
import { Form, Input, Button, Table, Popconfirm, Space, Select ,Pagination ,message} from 'antd';
import store from '../../store/index'
import './Visitor.scss';
import {observer} from 'mobx-react';
const { Option } = Select;
// 转换数据
const format=(data)=>{
  let   arr=data.map((v,i)=>{
        return {
            key:v.visId, 
            visId:v.visId,
            visName:v.visName, //访客姓名
            visPhone:v.visPhone, //联系方式
            visType:v.visType == 0 ? '企业' : (v.visType == 1?'公寓':'其他' ), //造访类型
            vireUnit:v.vireUnit, //造访单位
            havCar:v.havCar,    //是否驾车
            carNumber:v.carNumber, //车牌号码
            leaveTime:toTime(v.leaveTime), //造访结束时间
        }
    })
    store.dongji.visitor=arr;
} 
//转换时间格式
const toTime = (value) => {
    let date = new Date(value)
    let y = date.getFullYear()  //获取年份
    let m = date.getMonth() + 1  //获取月份ma
    m = m < 10 ? "0" + m : m  //月份不满10天显示前加0
    let d = date.getDate()  //获取日期
    d = d < 10 ? "0" + d : d  //日期不满10天显示前加0
    return y + "-" + m + "-" + d

}
const VisitorShow = ({ setState }) => {
    const [form] = Form.useForm();
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    //查询
    const [seachform]=Form.useForm()
    const search = () => {
        // console.log(seachform.getFieldsValue(true));
        http({
            url:'/visitors/visitorsList',
            method:'post',
            params:{ 
                visName:seachform.getFieldsValue(true).visName?seachform.getFieldsValue(true).visName:'',
                visType:seachform.getFieldsValue(true).visType?seachform.getFieldsValue(true).visType:'',
                visPhone:seachform.getFieldsValue(true).visPhon?seachform.getFieldsValue(true).visPhon:''
            }
        }).then((res)=>{
            // console.log(res);
            if(res.code==200){
             format(res.data.data);
             store.dongji.count=res.data.count;
             store.dongji.current=1
            }else{
                message.error({
                    content: '请输入正确的查询数据',
                    className: 'custom-class',
                    style: {
                      marginTop: '20vh',
                    },
                  });
            } 
            
        })
    }
    // 分页
    const pageChange=(current,size)=>{
        store.dongji.current=current
        // console.log(store.dongji.current);
        http({
            url: '/visitors/visitorsList',
            method:'post',
            params:{
                current: current,
                size:size,
                visName:seachform.getFieldsValue(true).visName?seachform.getFieldsValue(true).visName:'',
                visType:seachform.getFieldsValue(true).visType?seachform.getFieldsValue(true).visType:'',
                visPhone:seachform.getFieldsValue(true).visPhon?seachform.getFieldsValue(true).visPhon:''
            }
        }).then((res)=>{
            if(res.code==200){
                format(res.data.data)
                // console.log(store.dongji.current);
            }
        })
    }
    // 重置
    const resize = () => {
        seachform.resetFields();
        setSelectedRowKeys([])
        http({
            url:'/visitors/visitorsList',
            method:'post',
        }).then((res)=>{
            if(res.code==200){
                format(res.data.data)
                store.dongji.current=1;
                store.dongji.count=res.data.count;
            }
        })
    }
    // 单独删除
    const  del=(data)=> {
        // console.log(data.visId);
        let arr=new Array
        console.log(store.dongji.current );
        arr.push(data.visId)
        http({
            url:'/visitors/deleteVisitors',
            method:'post',
            data:arr ,
        }).then((res)=>{
            if(res.code==200){
                message.success({
                    content: '删除成功',
                    className: 'custom-class',
                    style: {
                      marginTop: '20vh',
                    },
                  });
                http({
                    url:'/visitors/visitorsList',
                    method:'post',
                    params:{
                        current:store.dongji.current  
                    }
                }).then((res)=>{
                    format(res.data.data)
                    store.dongji.count=res.data.count;
                })
            }
        })
    }
    // 批量删除
    const delAll=()=>{
        let arr=store.dongji.delArr
    console.log(store.dongji.delArr);
    http({
        url:'/visitors/deleteVisitors',
        method:'post',
        data:arr ,
    }).then((res)=>{
        if(res.code==200){
            message.success({
                content: '删除成功',
                className: 'custom-class',
                style: {
                  marginTop: '20vh',
                },
              });
            http({
                url:'/visitors/visitorsList',
                method:'post',
                params:{
                    current:store.dongji.current  
                }
            }).then((res)=>{
                format(res.data.data)
                store.dongji.count=res.data.count;
            })
        }
    })
    }
    // 新增
    const add = () => {
        setState(2)
    }
    // 详情
    const toDetail=(data)=>{
        setState(3)
        http({
            url:'/visitors/findOneVisitors',
            method:'post',
            params:{
                visId:data.visId
            }
        }).then((res)=>{
            store.dongji.visitorDetails=res.data
            // console.log( store.dongji.visitorDetails);
        })
    }
    function cancel(e) {
    }
  const choose=(filters)=>{
      console.log(filters);
  }
    //渲染表格标题
    const columns = [
        {
            title: '访客姓名',
            dataIndex: 'visName',
        },
        {
            title: '联系方式',
            dataIndex: 'visPhone',
        },
        {
            title: '造访类型',
            dataIndex: 'visType',
        },
        {
            title: '造访单位',
            dataIndex: 'vireUnit',
        },
        {
            title: '是否驾车',
            dataIndex: 'havCar',
        },
        {
            title: '车牌号码',
            dataIndex: 'carNumber',
        },
        
        {
            title: '造访结束时间',
            dataIndex: 'leaveTime',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (text, record) => (
                <Space size="middle">
                    <a   onClick={()=>{toDetail(record)}}>详情</a>
                    <Popconfirm
                        title="确定要删除吗?"
                        onConfirm={()=>{del(record)}}
                        onCancel={cancel}
                        okText="确定删除"
                        cancelText="取消"
                    >
                        <a href="#">删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
   
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
         setSelectedRowKeys(selectedRowKeys)
          let arr=[];
          for(let i=0;i<selectedRows.length;i++){
            arr.push(selectedRows[i].visId)
          }
          store.dongji.delArr=arr
          console.log(store.dongji.delArr);
        },
        getCheckboxProps: (record) => ({
        //   console.log(record)
        }),
        selectedRowKeys
    };

    return <div className='VisitorContent'>
        <Form form={form} name="horizontal_login" layout="inline" className='title'>
            <Form.Item
                name="username">
                <div className='kuai'>
                    <span></span>
                    <span>访客进出记录</span>
                </div>
            </Form.Item>
            <Form.Item className='btn'>
                <div>
                    <Button className='cha'
                        type="primary"
                        onClick={add}>新增</Button>
                    <Button className='resize' onClick={delAll} type="primary">批量删除</Button>
                </div>
            </Form.Item>
        </Form>
        <div className='form'>
            <Form form={seachform} name="horizontal_login" layout="inline" className='Role tim'>
                <div>
                    <Form.Item
                        name="visName"
                            label='访客姓名'
                        ><Input placeholder='请输入访客名称' />
                        
                    </Form.Item>
                    <Form.Item
                        name="visType"
                        label='访客类型'
                        >
                            <Select placeholder='请选择' className='select'>
                                <Option value="0">企业</Option>
                                <Option value="1">公寓</Option>
                                <Option value="2">其他</Option>
                            </Select>
                    </Form.Item>
                    <Form.Item
                        name="visPhone"
                            label='联系方式'
                        ><Input placeholder='请输入联系方式' />
                    </Form.Item>

                    <Form.Item className='btn'>
                        <div>
                            <Button className='cha'
                                type="primary"
                                onClick={search}>查询</Button>
                            <Button className='resize' onClick={resize} type="primary">重置</Button>
                        </div>
                    </Form.Item>
                </div>
            </Form>
            <Table className='table1'
                rowSelection={{
                    ...rowSelection,
                }}
                onChange={choose}
                pagination={false}
                columns={columns}
                dataSource={store.dongji.visitor}
            />
            {/* 分页器 */}
             <Pagination className='page' defaultCurrent={1}  current={store.dongji.current}
              total={store.dongji.count} onChange={pageChange}/>
        </div>
    </div>
};
export default observer(VisitorShow)